<template>
  <div class="shopCart">
    <Navbar class="cartNav">
      <span slot="navMiddle">购物车({{ productsLength }})</span>
    </Navbar>
      <Scroll class="cartScroll">
    <CartList />
      </Scroll>
    <Sum class="calSum" />
  </div>
</template>
<script>
import Navbar from "components/commom/navbar/Navbar";
import CartList from "./childComponent/cartList";
import Sum from "./childComponent/sum";
import { mapGetters } from "vuex";
import Scroll from "components/commom/scroll/scroll";
export default {
  components: {
    Navbar,
    CartList,
    Sum,
    Scroll,
  },
  computed: {
    ...mapGetters(["productsLength", "products"]),
  },
};
</script>
<style scoped>
.shopCart {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 49px;
}
.cartNav {
  background-color: rgb(255, 145, 144);
  color: #fff;
}
.calSum {
  position: fixed;
  bottom: 49px;
  left: 0;
  right: 0;
  background-color: #ddd;
}
.cartScroll {
  width: 100%;
  position: fixed;
  top: 40px;
  bottom: 89px;
  left: 0;
  right: 0;
  /* overflow-y: auto; */
}
</style>